<template>
  <PageWrapper title="">
    <XGrid
ref="xGrid"
    :stripe="false"
    :columns="columns"
    :show-overflow="true"
    :query-api="getTableData"
    :deletes-api="deletes"
    @create="drawer.data.show = true"
    @edit="handleEdit"
    @copy="handleCopy">
      <template #topLeft2>
        <Popconfirm
placement="bottom"
          title="提示：生成系统按钮，建议在初始化系统的时候使用。"
          ok-text="生成"
          cancel-text="取消"
          @confirm="handleGenerate">
          <a>生成系统内置的默认按钮</a>
        </Popconfirm>
      </template>
    </XGrid>

    <Drawer
:show="drawer.data.show" :is-update="drawer.data.isUpdate"
        :row="drawer.data.row"
        @on-success="onSuccess"
        @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Button" setup>
import { Popconfirm } from 'ant-design-vue';
import { reactive, ref, toRaw } from 'vue';
import Drawer from './Drawer.vue';
import { columns } from './data';
import { deletes, generate, getTableData } from '/@/api/admin/button';
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';

const xGrid = ref();

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}


const handleCopy = (row:any) => {
  let data = toRaw(row)
  data.ID = null
  Object.assign(drawer.data, {show: true, isUpdate: false, isCopy: true, row: data})
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  xGrid.value.reload()
  // xGrid.value.clearCheckboxRow()
}

const handleGenerate = () => {
  generate().then(() => {
    onSuccess()
  })
}
</script>
